<template>
  <l-content width="1710px" no-padding no-breadcrumb>
    <el-card body-style="padding: 0;">
      <el-tabs v-model="searchForm.shopCode" type="card" class="tab-pane-top" @tab-click="onTabClick">
        <el-tab-pane label="所有" name="all"/>
        <el-tab-pane v-for="item in options.shop" :key="item.shopNo" :label="item.shopName" :name="item.shopNo"/>
      </el-tabs>
      <div style="padding: 20px 30px">
        <el-form :inline="true" size="mini"
                 class="border-bottom-dashed"
                 :model="searchForm" label-width="100px"
                 onkeydown="if(event.keyCode===13){return false;}" @keyup.native.enter="onSearch">
          <div>
            <el-form-item label="调度日期">
              <el-date-picker
                value-format="yyyy-MM-dd"
                class="w120"
                v-model="searchForm.createTimeStart"
                type="date"
                placeholder="起始日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="截止" label-width="85px">
              <el-date-picker
                value-format="yyyy-MM-dd"
                class="w120"
                v-model="searchForm.createTimeEnd"
                type="date"
                placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="PNR" label-width="80px">
              <el-input class="w120" v-model="searchForm.recordNo" placeholder="支持查原PNR"/>
            </el-form-item>
            <el-form-item label="乘机人" label-width="75px">
              <el-input class="w120" v-model="searchForm.passengerName" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="票号"  label-width="80px">
              <el-input class="w120" v-model="searchForm.ticketNo" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="航班号"  label-width="75px">
              <el-input class="w120" v-model="searchForm.flight" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="航段"  label-width="55px">
              <el-input class="w120" v-model="searchForm.dCity" placeholder="起飞城市"/>
            </el-form-item>
            <el-form-item>
              <el-input class="w120" v-model="searchForm.aCity" placeholder="到达城市"/>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="网店出票单号">
              <el-input class="w120" v-model="searchForm.issueBillId" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="本地订单号" label-width="85px">
              <el-input class="w120" v-model="searchForm.localOrderId" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="政策代码" label-width="80px">
              <el-input class="w120" v-model="searchForm.policyCode" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="联系人" label-width="75px">
              <el-input class="w120" v-model="searchForm.contactPerson" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="号码" title="联系号码" label-width="80px">
              <el-input class="w120" v-model="searchForm.contactNumber" placeholder="联系号码"/>
            </el-form-item>

            <el-form-item label="状态" label-width="75px">
              <el-select class="w120" v-model="searchForm.orderStatus" placeholder="请输入" clearable>
                <el-option v-for="item in options.orderStatus" :key="item.key" :label="item.value" :value="item.key"/>
              </el-select>
            </el-form-item>

          <!--<el-form-item label="网店">-->
            <!--<el-input class="w160" v-model="searchForm.shopCode" placeholder="请输入"/>-->
          <!--</el-form-item>-->
          <el-form-item label="">
            <el-button :loading="loading" type="primary" @click="onSearchSelf">查自己</el-button>
            <el-button :loading="loading" type="primary" @click="onSearchAll">查询</el-button>
          </el-form-item>
          </div>
        </el-form>
        <div class="tool-button-box">
          <el-button size="small" plain @click="onChangeStatus('')" :class="(!query.orderStatus)?'active':''">全部</el-button>
          <el-button size="small" plain @click="onChangeStatus('2')" :class="query.orderStatus === '2'?'active':''">待出票（{{statusCount.waitNum}}）</el-button>
          <el-button size="small" plain @click="onChangeStatus('3')" :class="query.orderStatus === '3'?'active':''">出票中（{{statusCount.outNum}}）</el-button>
          <el-button size="small" plain @click="onChangeStatus('4')" :class="query.orderStatus === '4'?'active':''">已出票（{{statusCount.alreadyNum}}）</el-button>
          <el-button size="small" plain @click="onChangeStatus('10')" :class="query.orderStatus === '10'?'active':''">解冻失败（{{statusCount.thawFailureNum}}）</el-button>
          <span class="float-right" style="line-height: 40px">
          紧急程度说明：
          <span class="description"><div class="mark-red"></div>0-10分钟</span>
            <span class="description"><div class="mark-orange"></div>10-30分钟</span>
          <!--span class="description"><div class="mark-orange"></div>邻近NO位时间</span-->
        </span>
        </div>
        <c-page-table
          stripe
          :data="tableData"
          @select-page="onSelectPage"
          @sort-change="onSortChange"
          :loading="loading">
          <!--
          <el-table-column
            type="selection"
            width="40">
          </el-table-column-->

          <el-table-column
            prop="localOrderId"
            label=""
            width="30">
            <template slot-scope="scope">
              <!--a href="javascript:void(0)" @click="onDetail(scope.row)">{{scope.row.localOrderId}}</a >-->
              <a v-if="scope.row.relaOrderId" :title="scope.row.relaOrderId" class="fa fa-chain" href="javascript:void(0)" @click="onDetail(scope.row.relaOrderId)"></a >
              <!--<i v-if="scope.row.relaOrderId" title="scope.row.relaOrderId" class="fa fa-chain"></i>-->
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            min-width="82">
            <template slot-scope="scope">
              <template v-if="getCode(scope.row) === 'waitTicket'">
                <el-button title="详情" type="text" style="margin: 0" @click="onDetail(scope.row.localOrderId)">详</el-button>
                <template v-if="scope.row.canLock">
                  <easy-button v-if="canIssue(scope.row)" tip="锁单并出票" type="text" style="margin: 0" @click="onIssue($event, scope.row.localOrderId)">出</easy-button>
                  <easy-button tip="锁单" type="text" style="margin: 0" @click="onLock($event, scope.row)">锁</easy-button>
                </template>
              </template>
              <template v-else-if="getCode(scope.row) === 'drawing'">
                <el-button v-if="scope.row.canDoIssue" title="出票" type="text" style="margin: 0" @click="onDetail(scope.row.localOrderId)">
                  <span class="mark-adult" >出</span>
                </el-button>
                <el-button v-else title="详情" type="text" style="margin: 0" @click="onDetail(scope.row.localOrderId)">详</el-button>
              </template>
              <template v-else>
                <el-button title="详情" type="text" style="margin: 0" @click="onDetail(scope.row.localOrderId)">详</el-button>
              </template>
              <easy-button :class="{'mark-remark': !!scope.row.orderRemark}" style="margin: 0" :tip="scope.row.orderRemark" type="text" @click="onRemark($event, scope.row.localOrderId)">注</easy-button>
            </template>
          </el-table-column>
          <el-table-column
            label="预订时间"
            width="90">
            <template slot-scope="scope">
              <div>{{scope.row.orderDate | dateShortFormat}} {{scope.row.orderDate | timeShortFormat}}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="shopName"
            label="网店"
            min-width="65">
          </el-table-column>
          <el-table-column
            prop="issueBillId"
            label="网店出票单号"
            min-width="90">
          </el-table-column>
          <el-table-column
            label="PNR/原PNR"
            min-width="115">
            <template slot-scope="scope">
              <div>
                {{scope.row.recordNo}}
                <span  v-if="scope.row.oldPnr && scope.row.oldPnr !=''">/</span>
                {{scope.row.oldPnr}}
              </div>
              <div>
                <span class="mark-adult" v-if="scope.row.aduNum && scope.row.aduNum > 0">成</span>
                <span class="mark-child" v-if="scope.row.chiNum && scope.row.chiNum > 0">童</span>
                <span class="mark-baby" v-if="scope.row.babNum && scope.row.babNum > 0">婴</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="乘客"
            min-width="100">
            <template slot-scope="scope">
              <div>{{(scope.row.passengerList||[]).join('、')}}</div>
            </template>
          </el-table-column>
           <el-table-column
            label="乘机日期"
            prop="takeOffTime"
            width="90">
          </el-table-column>
           <el-table-column
            label="航程"
            prop="ports"
            width="75">
          </el-table-column>
          <el-table-column
            label="航班"
            prop="flight"
            width="60">
          </el-table-column>
          <el-table-column
            label="舱"
            prop="subClass"
            width="30">
          </el-table-column>
          <el-table-column
            prop="passengerNum"
            label="人"
            width="30">
          </el-table-column>

          <el-table-column
            label="紧急度"
            width="60">
            <template slot-scope="scope">
              <!--c-icon-seat v-if="scope.row.avSeatNum < 100" :color="scope.row.avSeatNum | urgentClass(scope.row.orderStatus)">
                {{scope.row.avSeatNum}}
              </c-icon-seat -->
              <div v-if="showUrgency(scope.row.orderStatus)" :class="scope.row.lastPrintTicketTime | leaveTimeClassFilter(scope.row.orderStatus)">{{scope.row.lastPrintTicketTime | leaveTimeFilter}}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="printPrice"
            label="票面价"
            width="65">
          </el-table-column>
          <el-table-column
            prop="salePrice"
            label="销售价"
            min-width="65">
          </el-table-column>
          <el-table-column
            prop="taxAndOilFee"
            label="税费"
            min-width="50">
          </el-table-column>
          <el-table-column
            prop="totalSalePrice"
            label="总价"
            min-width="60">
          </el-table-column>
          <el-table-column
            prop="orderStatusStr"
            label="状态"
            width="65">
          </el-table-column>
          <el-table-column
            label="政策类型"
            min-width="75">
            <template slot-scope="scope">
              <div>{{scope.row.policyTypeStr}}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="政策代码"
            min-width="140">
            <template slot-scope="scope">
              <div>{{scope.row.policyCode}}
                <c-mark-policy :code="scope.row.policyCode" :options="options.policyCodeMark"/>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作员"
            width="80">
            <template slot-scope="scope">
              <div>{{scope.row.lockOperatorName}}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="锁单"
            width="60">
            <template slot-scope="scope">
              <div>{{scope.row.lockTime | lockDurationFilter}} </div>
            </template>
          </el-table-column>
          <!--
          <el-table-column
            prop="pnrStatus"
            label="状态"
            width="65">
          </el-table-column>
          -->
          <!--el-table-column
            prop="totalPrintPrice"
            label="小计"
            min-width="65">
          </el-table-column-->
          <!--el-table-column
            label="联系人/号码"
            min-width="100">
            <template slot-scope="scope">
              <div>{{scope.row.contactPerson}}</div>
              <div>{{scope.row.contactNumber}}</div>
            </template>
          </el-table-column-->
          <!--el-table-column
            prop="totalPurchase"
            label="采购总价"
            min-width="65">
          </el-table-column>
          <el-table-column
            prop="profit"
            label="利润"
            min-width="65">
          </el-table-column>
          <el-table-column
            label="调度日期"
            width="90">
            <template slot-scope="scope">
              {{scope.row.createTime | dateShortFormat}} {{scope.row.createTime| timeShortFormat}}
            </template>
          </el-table-column-->
        </c-page-table>
      </div>
    </el-card>

    <component :is="dialog.tag" :data="dialog.data" @ok="refreshPage"
               @close="dialog.tag = ''"/>
  </l-content>
</template>

<script>
import Dict from '@/constants/Dict'
import RemarkDialog from './comps/OrderIssueList/RemarkDialog'
export default {
  name: 'OrderIssueList',
  components: {RemarkDialog},
  props: {
    app: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  filters: {
    takeOffTimeFilter (val, status) {
      const code = Dict.Map.orderStatus[status].code
      if (code === 'drawing' || code === 'waitTicket' || code === 'thawFailed') {
        const now = new Date()
        if (val < new Date(now.getFullYear(), now.getMonth(), now.getDate() + 2)) {
          return 'bg-red'
        }
      }
    },
    urgentClass (val, status) {
      const code = Dict.Map.orderStatus[status].code
      if (code === 'drawing' || code === 'waitTicket' || code === 'thawFailed') {
        if (val <= 5) {
          return 'red'
        } else if (val < 100) {
          return '#369be9'
        }
      }
    },
    leaveTimeFilter (val) {
      if (val) {
        const minute = (val - new Date().getTime()) / 60 / 1000
        if (minute <= 0) {
          return '超时'
        } else if (minute < 60) {
          return minute.toFixed(0) + '分'
        } else if (minute < 60 * 24) {
          return (minute / 60).toFixed(0) + '小时'
        } else {
          return '天'
        }
      } else {
        return ''
      }
    },
    leaveTimeClassFilter (v, status) {
      const code = Dict.Map.orderStatus[status].code
      if (code === 'drawing' || code === 'waitTicket' || code === 'thawFailed') {
        const minute = (v - new Date().getTime()) / 60 / 1000
        if (minute <= 0) {
          return 'bg-purple'
        } else if (minute <= 10) {
          return 'bg-red'
        } else if (minute <= 30) {
          return 'bg-orange'
        } else {
          return ''
        }
      }
    },
    lockDurationFilter (v) {
      if (v) {
        const minute = (new Date().getTime() - v) / 60 / 1000
        if (minute < 60) {
          return minute.toFixed(0) + '分钟'
        } else if (minute < 60 * 24) {
          return (minute / 60).toFixed(0) + '小时'
        } else {
          return (minute / 24 / 60).toFixed(0) + '天'
        }
      } else {
        return ''
      }
    }
  },
  data () {
    const now = new Date()
    const nowStr = now.format('yyyy-MM-dd')
    return {
      loading: false,
      dialog: {
        tag: '',
        data: {}
      },
      options: {
        orderStatus: [
          {
            key: '2',
            value: '待出票'
          },
          {
            key: '3',
            value: '出票中'
          },
          {
            key: '4',
            value: '已出票'
          },
          {
            key: '10',
            value: '解冻失败'
          }
        ],
        shop: [],
        policyCodeMark: []
      },
      searchForm: {
        orderSource: null,
        createTimeStart: nowStr,
        createTimeEnd: nowStr,
        recordNo: null,
        passengerName: null,
        ticketNo: null,
        issueBillId: null,
        orderStatus: '2',
        policyCode: null,
        contactPerson: null,
        contactNumber: null,
        localOrderId: null,
        flight: null,
        aCity: null,
        dCity: null,
        shopCode: 'all'
      },
      query: {
        page: 1,
        pageSize: 50
      },
      tableData: {
        /* 表格数据固定写法 */
        records: 0,
        page: 1,
        rows: []
      },
      statusCount: {
        waitNum: 0,
        outNum: 0,
        alreadyNum: 0,
        thawFailureNum: 0
      }
    }
  },
  created () {
    this.onSearch()
    this.loadShopList()
    this.loadOptions()
  },
  methods: {
    loadOptions () {
      this.$service.options.getPolicyCodeMark().then(res => {
        this.options.policyCodeMark = res.data
      })
    },
    getCode (row) {
      return Dict.Map.orderStatus[row.orderStatus].code
    },
    canIssue (row) {
      const code = Dict.Map.orderStatus[row.orderStatus].code
      return (code === 'drawing' && row.canDoIssue) || code === 'waitTicket'
    },
    showUrgency (v) {
      const code = Dict.Map.orderStatus[v].code
      return code === 'drawing' || code === 'waitTicket' || code === 'thawFailed'
    },
    loadShopList () {
      this.$service.order.queryAirOnlineShopList().then(res => {
        this.options.shop = res.data
      })
    },
    onSearchSelf () {
      this.query.queryType = 1
      this.onSearch()
    },
    onSearchAll () {
      this.query.queryType = 0
      this.onSearch()
    },
    onChangeStatus (v) {
      this.searchForm.orderStatus = v
      this.onSearch()
    },
    onSearch () {
      // 把searchForm里面的值覆盖到paramForm里面去
      Object.assign(this.query, this.searchForm)
      this.query.page = 1
      this.refreshPage()
    },
    onSelectPage (page, size) {
      this.query.page = page
      this.query.pageSize = size
      this.refreshPage()
    },
    onSortChange ({sidx, sord}) {
      // 排序设置
      this.query.sidx = sidx
      this.query.sord = sord
      this.refreshPage()
    },
    // 为了锁单时转圈圈
    refreshPage (loading = true) {
      this.loading = loading
      this.$service.order.queryIssueOrderPage(this.query).then(res => {
        this.tableData = res.data
      }).finally(() => {
        this.loading = false
      })
      this.$service.order.queryIssueOrderStatusNum(this.query).then(res => {
        if (res.data == null) {
          this.statusCount = {
            waitNum: 0,
            outNum: 0,
            alreadyNum: 0,
            thawFailureNum: 0
          }
        } else {
          this.statusCount = res.data
        }
      })
    },
    onTabClick () {
      if (this.searchForm.shopCode === 'all') {
        this.query.shopCode = ''
      } else {
        this.query.shopCode = this.searchForm.shopCode
      }
      this.firstPage()
    },
    firstPage () {
      this.query.page = 1
      this.refreshPage()
    },
    onDetail (localOrderId) {
      window.open('#/air-order-manage/order-issue-detail?localOrderId=' + localOrderId)
    },
    onLock (done, row) {
      this.$service.order.lockIssueOrder({localOrderId: row.localOrderId}).then(res => {
        row.canDoIssue = true
        row.orderStatus = Dict.getByCode('orderStatus', 'drawing').key
      }).finally(done)
    },
    onIssue (done, localOrderId) {
      this.$service.order.lockIssueOrder({localOrderId}).then(res => {
        this.refreshPage(false)
        window.open('#/air-order-manage/order-issue-detail?localOrderId=' + localOrderId)
      }).finally(done)
    },
    onRemark (done, localOrderId) {
      done()
      this.dialog.tag = 'RemarkDialog'
      this.dialog.data = { localOrderId }
    }
  }
}
</script>

<style></style>
